const userListEle = document.querySelector('#user-list')
const paginationEle = document.querySelector(".pagination")
const userDetailForm = document.getElementById('user-detail');
const detailFieldSelector = {
    username:'#username',
    email:'#email',
    telephone:'#telephone',
    birthday:'#birthday',
    gender:"[name=gender]",
    state:"#state",
    addr:"#addr",
    loginTime:"#login-time",
    intro:"#intro"
}
const baseUrl = "http://47.105.173.95:3000/api/users"
let userList = []

function updateDom() {
    const usersListHtml = userList.map(user => {
        return `
        <tr>
            <td>${user.id}</td>
            <td>${user.username}</td>
            <td>${user.gender == 0 ? '男' : '女'}</td>
            <td>${user.telephone}</td>
            <td>
                <button class="btn btn-primary" data-type="detail" data-id="${user.id}" data-toggle="modal" data-target="#myModal" >详情</button>
                <button class="btn btn-danger " data-type="delete" data-id="${user.id}">删除</button>
            </td>
        </tr>`
    }).join('')
    userListEle.innerHTML = usersListHtml
}
function ajaxGet(url, callback) {
    //#1.创建xhr实例
    const xhr = new XMLHttpRequest()
    //#2.初始化一个请求
    xhr.open('GET', url)
    //#3.发送请求
    xhr.send()
    //#4.监听xhr的readystate的变化，使用onreadystatechange函数
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            const res = JSON.parse(xhr.responseText)
            callback(res)

        }
    }
}

function renderUsers(res) {
    userList = res.results.users
    updateDom()
}

function getAllUsers() {
    const url = baseUrl
    ajaxGet(url, function (data) {
        if (data.code == 0) {
            renderUsers(data)
        }
    })
}
//根据页码获取用户
function getusers(page,callback) {
    const url = baseUrl + `?_page=${page}`
    ajaxGet(url, function (data) {
        if (data.code == 0) {
            callback(data)
        }
    })
}

function getuser(id,callback) {
    const url = baseUrl + `?id=${id}`
    ajaxGet(url, function (data) {
        if (data.code == 0) {
            callback(data)
        }
    })
}

function setDetail(user){
    console.log(user)
    const detailFieldData = {
        username:user.username,
        email:user.email,
        telephone:user.telephone,
        birthday:user.birthday,
        gender:user.gender,
        state: user.state,
        addr:user.address,
        loginTime:user.time,
        intro:user.intro
    }
    for(const field in detailFieldSelector){
        const elementSelector = detailFieldSelector[field]
        const element = document.querySelector(elementSelector)
        // if(element.tagName == "INPUT" && element.type != "radio" && element.type != "checkbox"){
        //     element.value = detailFieldData[field]
        // }
        element.value = detailFieldData[field]
    }
}
userListEle.addEventListener('click',function(e){
    const clickElement = e.target
   
    if(clickElement.tagName == "BUTTON" && clickElement.dataset.type == 'detail'){   
        getuser(clickElement.dataset.id,function(res){
            setDetail(res.results.users[0])
        })
    }
})
getAllUsers()





